import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Item from '../Item';

import './index.css';

export default class List extends Component {

  static propTypes = {
    todoList: PropTypes.array.isRequired,
    updateTodo: PropTypes.func.isRequired,
    removeTodo: PropTypes.func.isRequired
  }

  render() {

    const { todoList, updateTodo, removeTodo } = this.props;

    return (
      <div className='List'>
        {
          todoList && todoList.map(todo => {
            return (
              <Item 
                key = { todo.id }  
                todo = { todo } 
                updateTodo = { updateTodo } 
                removeTodo = { removeTodo }
              />
            )
          })
        }
      </div>
    )
  }
}

